import stypes from "./tag.less"
import { useEffect } from "react"
import { useDispatch, useSelector, ArticleModelState, Link } from "umi"

export default function Tag() {
  let dispatch = useDispatch(),
    { tagList } = useSelector((state: { article: ArticleModelState }) => state.article)

  useEffect(() => {
    dispatch({
      type: "article/getTagList"
    })
  }, [])

  return (
    <div className={stypes.tag}>
      <div className={stypes.top}><span>文章标签</span></div>
      <ul className={stypes.ul}>
        {tagList.map((item, index) => (
          <li key={index}>
            <Link to="/">
              {item.label} [{item.articleCount}]
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}